<template>
	<div>
		<van-overlay :show="showStepsStatus" @click.prevent="closeSteps" lock-scroll>
			<div class="wrapper">
				<div id="block" class="block" v-if="steps" @click.stop>
					<div style="width: 100%">
						<h1>步骤{{ active + 1 }}</h1>
					</div>
					<div class="img_Box">
						<img :src="getImages(steps[active].imgUrl)" alt="" />
					</div>
					<div class="text_box">
						<p>{{ steps[active].content }}</p>
					</div>
					<!-- 倒计时 -->
					<van-count-down v-if="countDownTime != null" :time="countDownTime" @finish="finish" />
					<div class="countdown">
						<!-- 环型进度条 -->
						<van-circle
							v-model="currentRate"
							:rate="countDownTime"
							:speed="countDownTime"
							:text="circleText"
							@click.native="setStepsTimeout"
						/>
					</div>
					<div class="button_Box">
						<button v-show="!FinishStatus" @click="nextStep">下一步</button>
						<button v-show="FinishStatus" @click="share">打卡</button>
					</div>
					<!-- 时间选择器 -->
					<div class="my-container">
						<van-datetime-picker
							v-show="datatimeShow"
							v-model="currentTime"
							type="time"
							title="选择时间"
							:min-hour="0"
							:max-hour="59"
							@confirm="onConfirm"
						/>
						<!-- <van-popup
							v-model="TimePopupStatus"
							:get-container="getContainer"
							round
							closeable
							lazy-render
							position="bottom"
							:style="{ height: '30%' }"
						/> -->
					</div>
				</div>
			</div>
		</van-overlay>
	</div>
</template>

<script>
export default {
	name: 'FoodStepsIndex',
	props: {
		showStepsStatus: {
			require: false,
		},
		steps: {
			require: true,
		},
	},
	data() {
		return {
			active: 0,
			currentRate: 0,
			circleText: '点击开启定时',
			countDownTime: null,
			FinishStatus: false,
			TimePopupStatus: true,
			currentTime: '',
			datatimeShow: false,
		};
	},
	methods: {
		/** @method 跳转到下一个步骤 */
		nextStep() {
			this.countDownTime = null;
			this.circleText = '点击开启定时';
			this.active++;
			if (this.active == this.steps.length - 1) {
				this.FinishStatus = true;
			}
		},
		/** @method 跳转到打卡页面 */
		share() {
			this.$router.push('/user/share/add');
		},
		/** @method 关闭步骤 */
		closeSteps() {
			this.$parent.showStepsStatus = false;
		},
		/** @method 开启时间选择器 */
		setStepsTimeout() {
			this.datatimeShow = true;
		},
		/** @method 选择定时的时间 */
		onConfirm(value) {
			// 获取分秒的正则
			const reg = /^\d{2}:\d{2}$/;
			// 判断是否符合正则
			if (reg.test(value)) {
				// 分秒转换成秒
				const [min, sec] = value.split(':').map((item) => parseInt(item));
				// 计算总秒数
				const totalSec = min * 60 + sec;
				// 设置倒计时
				this.countDownTime = totalSec * 1000;
				// 设置倒计时文字
				this.circleText = '正在计时';
				this.datatimeShow = false;
			}
		},
		/** @method 倒计时结束 */
		finish() {
			this.$toast('播放声音!!!');
			this.nextStep();
		},
	},
};
</script>

<style scoped>
.wrapper {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.block {
	width: 80%;
	height: 80%;
	background-color: #fff;
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px;
	position: relative;
}
.block .img_Box {
	width: 100%;
	height: 208px;
	overflow: hidden;
	border-radius: 10px;
}
.block img {
	width: 100%;
	margin: 15px 0 15px 0;
	border-radius: 10px;
	pointer-events: none;
}
.block .text_box {
	width: 100%;
	height: 200px;
	overflow: hidden;
}
.block .text_box p {
	color: #3c454b;
	padding: 10px 0;
	font-weight: 700;
	text-indent: 2rem;
	display: block;
	width: 100%;
	height: 200px;
	overflow-y: hidden;
	overflow: scroll;
}
.block .countdown {
	display: flex;
	justify-items: center;
	align-items: center;
	height: auto;
	margin: 20px 0 20px 0;
	position: absolute;
	bottom: 40px;
}
.block .button_Box {
	position: absolute;
	bottom: 20px;
}
.block .button_Box button {
	width: 100px;
	height: 30px;
	border: none;
	border-radius: 15px;
	color: #fff;
	background-color: rgb(255, 215, 25);
}
</style>
